<template>
	<view class="container">
		
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{moneyCash}}</text>
		</view>

		<view class="pay-type-list">
			
			
			<tui-list-cell class="tui-list">
				<view class="tui-list-cell-name">订单总额</view>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right" style="color:#ff4700;font-weight: bold;margin:5px">{{moneyTotal}}</tui-tag>
			</tui-list-cell>
			<tui-list-cell v-if="moneyPoint > 0" class="tui-list">
				<view class="tui-list-cell-name">积分抵扣</view>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">该单自动使用<font style="color:#ff4700;font-weight: bold;margin:5px">{{moneyPoint}}</font>积分抵扣</tui-tag>
			</tui-list-cell>
			
			<tui-list-cell v-if="moneyJiaMi > 0" class="tui-list">
				<view class="tui-list-cell-name">佳米抵扣</view>
				<tui-tag size="small" type="light-green" shape="circle" class="tui-right">该单自动使用<font style="color:#ff4700;font-weight: bold;margin:5px">{{moneyJiaMi}}</font>佳米抵扣</tui-tag>
			</tui-list-cell>
			
			<view class="type-item" @click="changePayType(1)" style="margin-top: 10px;">
				<tui-icon name="wechat" :size="36" color="#36cb59" class="pay-type-icon"></tui-icon>
				<view class="pay-type-con">
					<text class="pay-type-tit">微信支付</text>
					<text>请在微信客户端打开</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked="payType == 1 ? 'checked' : false" /></radio>
				</label>
			</view>
			
			<view class="type-item" @click="changePayType(2)" style="margin-top: 10px;">
				<tui-icon name="alipay" :size="36" color="#01aaef" class="pay-type-icon"></tui-icon>
				<view class="pay-type-con">
					<text class="pay-type-tit">支付宝支付</text>
					<text>请在支付宝客户端打开</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked="payType == 2 ? 'checked' : false" /></radio>
				</label>
			</view>
			
			<view v-if="mallType != 11" class="type-item" @click="changePayType(11)">
				<tui-icon name="wallet" :size="36" color="#fe8e2e" class="pay-type-icon"></tui-icon>
				<view class="pay-type-con">
					<text class="pay-type-tit">钱包余额支付</text>
					<text>可用余额 ¥{{myMoney}}</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked="payType == 11 ? 'checked' : false" /></radio>
				</label>
			</view>
			
			<view v-if="false" class="type-item" @click="changePayType(21)">
				<tui-icon name="applets" :size="36" color="#01aaef" class="pay-type-icon"></tui-icon>
				<view class="pay-type-con">
					<text class="pay-type-tit">消费积分支付</text>
					<text>可用积分${{myMoneyGold}}</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked="payType == 21 ? 'checked' : false" /></radio>
				</label>
			</view>
			
		</view>
		
		<text class="to-pay-btn" @click="doOrderPay()">确认支付</text>
	</view>
</template>


<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton,
			tuiListView,
			tuiListCell,
			tuiTag,
		},
		data() {
			return {
				payType: 1,			//1微信支付 2支付宝支付 11余额支付 21消费积分支付
				prepayId: 0,
				myMoney: 0,			//我的钱包余额
				myMoneyGold: 0,		//我的消费积分余额
				orderMoney: 0,
				orderMoneyGold: 0,
				myMoneyEnough: true,
				wxPayUrl: '',
				aliPayUrl: '',
				moneyTotal: 0,
				moneyCash: 0,
				moneyPoint: 0,
				moneyJiaMi: 0,
				mallType: 1,
			}
		},
		computed: {
		
		},
		methods: {
			
			//选择支付方式
			changePayType: function(type) {
				this.payType = type;
			},
			
			doOrderPay: function() {
				if(this.payType == 1) {			//微信支付
					this.postPayWx();
				}else if(this.payType == 2){	//支付宝
					this.postPayAlipay();
				}else if(this.payType == 11){	//钱包余额支付
					this.postPayMyMoney();
				}
			},
			
			//得到我的预支付订单的详情
			getMyOrderPrepayInfo: function() {
				uni.request({
					url: this.$apiUrl + '/api/order/prepayInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						prepay_id: this.prepayId,
					},
					success: (res) => {
						let resData = res.data['data'];
						let resError = res.data['error'];
						if(resError == 0) {
							this.wxPayUrl = resData.wx_pay_url;
							this.aliPayUrl = resData.ali_pay_url;
							this.mallType = resData.mall_type;
							this.moneyTotal = resData.money_total;
							this.moneyCash = resData.money_cash;
							this.moneyPoint = resData.money_point;
							this.moneyJiaMi = resData.money_jia_mi;
						}else{
							this.tui.toast("数据请求失败~"); return;
						}
					}
				});
			},
			
			//我的个人信息
			getMyBaseInfo: function() {
				uni.request({
					url: this.$apiUrl+ '/api/user/baseInfo',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					success: (res) => {
						let resData = res.data['data'];
						this.myMoney = resData.money;
					}
				});
			},
			
			
			//微信支付--打开微信支付的链接
			postPayWx: function() {
			//	let wxPayUrl = 'https://ccloud.fuioupay.com/decca/native?token=20241211241236154757';
				let wxPayUrl = this.wxPayUrl;
				if(wxPayUrl.length < 10) {
					this.tui.toast('商户支付参数有误', 2000, false);
					return ;
				}else{
					window.open(wxPayUrl);
				}
			//	this.wxH5Pay();
			},
			
			postPayAlipay: function() {
			//	let wxPayUrl = 'https://ccloud.fuioupay.com/decca/native?token=20241211241236154757';
				let aliPayUrl = this.aliPayUrl;
				if(aliPayUrl.length < 10) {
					this.tui.toast('商户支付参数有误', 2000, false);
					return ;
				}else{
					window.open(aliPayUrl);
				}
			},
			
			
			//余额支付
			postPayMyMoney: function() {
				if(parseFloat(this.myMoney) < parseFloat(this.orderMoney)){
					this.tui.toast('钱包余额不足', 2000);
					return;
				}
				uni.request({
					url: this.$apiUrl+ '/api/pay/payByMoney',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						prepay_id: this.prepayId,
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						let resCode = res.data['code'];
						let resData = res.data['data'];
						if(resCode == 200) {
							this.tui.toast(resMsg, 2000, false);
							
							// let showLottey = resData.show_lottery || 1;
							// if(showLottey == 1) {
							// 	setTimeout(() => {
							// 		uni.navigateTo({ 
							// 			url: '/pages/pay/success?prepay_id=' + this.prepayId
							// 		});
							// 	}, 500);
							// }else{
								setTimeout(() => {
									uni.switchTab({ 
										url: '/pages/my/index'
									});
								}, 500);
						//	}
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
		},
		
		
		onLoad: function(options) {
			this.prepayId = options.prepay_id || 0;
			this.getMyBaseInfo();		//先得到个人信息
			this.getMyOrderPrepayInfo();
		},
		
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
			uni.stopPullDownRefresh()
		},
		
		onReachBottom: function() {
		//	this.tui.toast("试试商品搜索的功能吧~")
			return;
		},
		
	}
</script>


<style lang='scss'>
	
	.price-box {
		background-color: #fff;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #909399;
	}
	
	.price{
		font-size: 50rpx;
		color: #ff4700;
		margin-top: 12rpx;
	}
	
	.price:before{
		content: '￥';
		font-size: 40rpx;
	}
	
	.money-gold{
		margin-top: 12rpx;
		font-size: 30rpx;
	}
	
	.pay-type-list {
		margin-top: 20rpx;
		background-color: #fff;
		padding-left: 60rpx;
	}
		
	.type-item{
		height: 120rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60rpx;
		font-size: 30rpx;
		position:relative;
		border-bottom: 2rpx solid #f1f1f1;
	}
	
	.type-item-gray{
		height: 100rpx;
	}
	
	.pay-type-icon{
		width: 100rpx;
		font-size: 52rpx;
	}

	.pay-type-tit{
		font-size: 36rpx;
		color: #222;
		margin-bottom: 4rpx;
	}
	
	.pay-type-con{
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		color: #aaa;
	}

	.to-pay-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 80rpx;
		margin: 80rpx auto 30rpx;
		font-size: 40rpx;
		color: #fff;
		background-color: #FF5A5F;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	
	
	.tui-box {
		width: 100%;
		background: #fff;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.tui-assets-box {
		height: 178rpx;
		margin-top: 20rpx;
	}
	
	.tui-assets-box-list{
		margin-top: 20rpx;
	}
	
	.tui-assets-list {
		height: 84rpx;
	}
	
	.tui-assets-num {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		position: relative;
	}
	
	.tui-assets-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #666;
		padding-top: 6rpx;
	}
	
	.tui-tool-box {
		margin-top: 20rpx;
	}
	
	.tui-flex-wrap {
		flex-wrap: wrap;
		height: auto;
		padding-bottom: 30rpx;
	}
	
	
	.tui-list {
		display: flex;
		align-items: center;
		flex-direction:row;	
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-content:baseline;
	}
	
	.tui-right {
		margin-left: auto !important;
		margin-right: 26rpx !important;
		font-size: 26rpx;
		line-height: 26rpx;
		color: #999;
	}
	
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}

</style>